<template>
  <NuxtLayout name="user" menuActive="8">
    <div style="padding: 30px;">
      <el-table :data="tableData" border show-overflow-tooltip>
        <el-table-column prop="institutionFullName" label="机构全称" />
        <el-table-column prop="classesName" label="班级名称" />
        <el-table-column prop="idName" label="学员姓名" width="100" />
        <el-table-column prop="certTime" label="发证时间" width="180" />
        <el-table-column label="操作" fixed="right" width="75">
          <template #default="scope">
            <a class="el-button el-button--primary el-button--small" :href="scope.row.certUrl" target="_blank">查看</a>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagin">
        <el-pagination background layout="prev, pager, next, total" :total="total" :page-size="listForm.pageSize"
          @change="pageChangeFn" />
      </div>
    </div>
  </NuxtLayout>
</template>

<script setup>
import { certificate } from '~/server/api'
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_我的证书",
  keywords: "技考邦,我的证书",
  description: "技考邦，我的证书。",
  ogTitle: "技考邦_我的证书",
  ogDescription: "技考邦，我的证书。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
})
// 列表
const tableData = ref([])
const total = ref(0)
const listForm = ref({
  pageNum: 1,
  pageSize: 20
})
const getList = async () => {
  let { data: listRes } = await useAsyncData('certificate', () => useServerRequest(certificate, {
    method: 'post',
    body: JSON.stringify(listForm.value)
  }))
  if (listRes.value.errno == 0) {
    tableData.value = listRes.value.result.list;
    total.value = listRes.value.result.total;
  }
}
getList()
// 分页
const pageChangeFn = (val) => {
  useRouter().push(`/userCenter/MyCertificate?p=${val}`)
  // listForm.value.pageNum = val;
  // getList()
}
// 监听
watchEffect(() => {
  // 分页
  if (useRoute().query.p) {
    listForm.value.pageNum = useRoute().query.p;
    getList()
  }
})
</script>

<style lang="less" scoped>
.pagin {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>